<template>
  <div class="panel">
    <el-button type="danger" class="btn" @click.stop="$emit('add')">新增</el-button>

    <el-dropdown @command="handleCommand" class="mar">
      <el-button type="primary">
        {{comman}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="id">按特产id查找</el-dropdown-item>
        <el-dropdown-item command="phone">按手机查找</el-dropdown-item>
        <el-dropdown-item command="status">按状态查找</el-dropdown-item>
        <el-dropdown-item command="day">按日期查找</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-input placeholder="查找内容" v-model="cont">
      <el-button slot="append" icon="el-icon-search" @click="gogo()"></el-button>
    </el-input>
  </div>
</template>

<script>
export default {
  name: "Panel",
  data() {
    return {
      comman: "查找类型",
      cont: "",
      conts: {
        id: "",
        phone: "",
        status: "",
        day: ""
      }
    };
  },
  methods: {
    handleCommand(command) {
      this.comman = command;
      this.conts = {
        id: "",
        phone: "",
        status: "",
        day: ""
      };
    },
    gogo() {
      for (let key in this.conts) {
        if (key == this.comman) {
          this.conts[key] = this.cont;
        }
      }
      this.$emit("search", this.conts);
    }
  }
};
</script>

<style lang="scss" scoped>
.panel {
  margin-bottom: 20px;
  display: flex;
  .btn {
    margin-right: 20px;
  }
}
.mar {
  margin-right: 15px;
}
</style>